-
Notifications
You must be signed in to change notification settings - Fork 8
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Issue 7 - Create builders list page #29
Issue 7 - Create builders list page #29
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
TODO:
|
2b145b2
to
2ede065
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great job! Very clean architecture. I left some suggestions about the pictures - lmk what you think!
const getRandomGender = () => { | ||
return Math.random() < 0.5 ? "men" : "women"; | ||
}; | ||
|
||
const getRandomUserImage = () => { | ||
const randomInt = Math.floor(Math.random() * 50); | ||
const randomGender = getRandomGender(); | ||
|
||
return `https://randomuser.me/api/portraits/${randomGender}/${randomInt}.jpg`; | ||
}; | ||
|
||
const getBuilderFromEvent = (event: any): Builder => ({ | ||
image: getRandomUserImage(), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wonder what else we can do for profile pictures 🤔
Your design does a great job emphasizing the rounded portraits, so it seems silly to have random placeholders in the final version.
- Is it possible to map builders to their GitHub profiles and fetch those avatars, just like you do for mentors?
- If not, there are also BlockieAvatars (SE-2 docs) you can modify.
- Here's where they are used in the BuidlGuidl app!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have tried to obtain the GitHubs of the builders automatically, but I haven't found a way. For this, I suppose we would need to manually keep a record of all users and their GitHubs. I have therefore decided to use BlockieAvatars for the image.
Maybe somebody can help with this and find a way to get github profiles automatically.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we could use ENS avatars. let me try something out...
const mentors: Mentor[] = [ | ||
{ | ||
name: "Eda", | ||
image: "https://avatars.githubusercontent.com/u/22100698?v=4", | ||
link: "https://github.com/edakturk14", | ||
checkedIn: false, | ||
}, | ||
{ | ||
name: "Derrek", | ||
image: "https://avatars.githubusercontent.com/u/80121818?v=4", | ||
link: "https://github.com/derrekcoleman", | ||
checkedIn: false, | ||
}, | ||
{ | ||
name: "Philip", | ||
image: "https://avatars.githubusercontent.com/u/90064316?v=4", | ||
link: "https://github.com/phipsae", | ||
checkedIn: false, | ||
}, | ||
]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I really appreciate your inclusion of the mentors :)))
packages/nextjs/types/builders.ts
Outdated
export type Builder = { | ||
image: string; | ||
link: string; | ||
checkedIn: boolean; | ||
}; | ||
|
||
export type Mentor = Builder & { | ||
name: string; | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Very clean
58c8dd1
to
d564a55
Compare
@danitome24 really nice work! i have some small changes that i'd like to contribute to this PR. not sure how do i push my commit in here tho.. do i need to fork your fork and push to that? or something else... here's the screenshot of what i'm thinking:
|
@ishtails you've got the right idea. Check out this discussion about how to manage multiple “remotes” for your local version of the repo. The goal is to make a PR to Dani’s fork of the repo (rather than to the main repo we’re having this discussion in). |
Tried forking his fork, for some reason i am not able to do that.. so i am thinking to just open a new PR for making the changes i proposed once this is merged (anyway i wanted to redesign the UI like the new home page layout). please proceed with the merge as usual. i'll pick it up once this PR is closed. |
Not so fast @ishtails - you can do this. Your goal is to make a PR to his repo, specifically to his Resources to learn about changing your Definitely worth learning because (a) you will encounter this again in the future and (b) even though the learning make take a moment, the actual fix is only a couple |
- ens avatar is displayed whenever it exists - user address is displayed below the avatar for identification - filtered duplicate builder entries before rendering
improvements on existing layout
haha you were right, i was just running away xD.. got it working with your and @danitome24's help. thankyou for teaching me something new :)) |
I’m proud of your persistence! Thanks for the help, @danitome24 🤝 |
Description
Created a page to display a list of builders and mentors. The page features:
A section for mentors with their photos, names, and links to their personal pages.
A section for builders with similar details.
A dynamic counter that shows how many builders have checked in out of the total.
You can see a first template:
Additional Information
Related Issues
Closes #7
Your ENS/address: 0xaa4C60b784E2b3E485035399bF1b1aBDeD66A60f